<template>
    <div class="app-container">
        <div class="btn">
            <el-button @click="createPdf">打印</el-button>
            <el-button @click="editbus">编 辑</el-button>
        </div>
        <span id="pdf-wrap">
            <div class='table' v-cloak style="box-sizing:border-box;width:100%;text-align:center;">
                <div class='table-left' style="background:#f7f7f7;box-sizing:border-box;width:12%;border:1px solid #ccc;border-bottom:none;border-right:none;line-height:50px;float:left;">
                    <div class="sy-data" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:100%;height:50px;border-top:none;border-left:none;font-size:14px">节数</div>
                    <div class="sy-data" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:100%;height:50px;border-top:none;border-left:none;font-size:14px" v-for='(item,index) in dataApplyOrder' :key="index">{{index+1}}</div>
                </div>
                <div class='table-right' style="box-sizing:border-box;width:88%;height:100%;border:1px solid #ccc;border-right:none;border-left:none;border-bottom:none;float:left;">
                    <div class='table-right-top' style="box-sizing:border-box;height:50px;line-height:50px;border-bottom:1px solid #ccc;background:#f7f7f7;">
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周一</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周二</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周三</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周四</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周五</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周六</div>
                        <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;height:50px;border-top:none;border-left:none;font-size:14px">周日</div>
                    </div>
                    <div class="sylla" style="box-sizing:border-box;border:1px solid #ccc;float:left;width:14.285%;line-height: 50px;height:50px;border-top:none;border-left:none;font-size:12px" v-for='(item,index) in dataApply' :key="index">{{item}}</div>
                </div>
            </div>
        </span>
    </div>
</template>

<script>
import leadingIn from './leadingIn';
export default{
    components: {leadingIn},
    data() {
        return {
            dataApply: [],
            dataApplyOrder: [],
            batchBind: {
                dialogFormVisible: false
            }
        }
    },
    // created() {
    //     this.getFirstList();
    // },
    methods: {
        // 父组件调用展示课程表
        getFirstList(dataList) {
            this.dataApply = [...dataList];
            this.dataApplyOrder = [];
            for (let i = 0;i < dataList.length/7 ;i++) {
                let temp = '';
                this.dataApplyOrder.push(temp);
            }
        },
        editbus() {
            this.$emit('editbus')
        },
        // 导入
        createPdf() {
            let newWindow = window.open('_blank');   // 打开新窗口
            let codestr = document.getElementById('pdf-wrap').innerHTML;   // 获取需要生成pdf页面的div代码
            newWindow.document.write(codestr);   // 向文档写入HTML表达式或者JavaScript代码
            newWindow.document.close();     // 关闭document的输出流, 显示选定的数据
            newWindow.print();   // 打印当前窗口
            return true;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 18px 10px;
    .btn{
        padding-bottom:20px;
    }
}

</style>
